<template>
    <div class="money-number-wrapper">
        <div class="money-number-content" :class="type === '-' ? 'outcome' : 'income'">
            <Icon :name="type === '-' ? 'outcome' : 'income'"></Icon>
            <label for="expression">金额</label>
            <div class="input-wrapper">
                <div :class="type === '-' ? 'outcome' : 'income'">
                    <span>{{amountValue}}</span>
                    <span v-if="dotPosition === 'emptyString'">0.00</span>
                    <span v-else-if="dotPosition === 'noDot'">.00</span>
                    <span v-else-if="dotPosition === 'lastButOne'">0</span>
                    <span v-else-if="dotPosition === 'last'">00</span>
                    <span v-else></span>
                </div>
<!--                <input name="money-number" id="money-number" placeholder="0.00" -->
<!--                       :key="type" v-model="amountValue" readonly/>-->
                <input name="expression" id="expression" v-model="expressionDisplay" readonly/>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Prop} from 'vue-property-decorator';

    @Component
    export default class Amount extends Vue {
        name = 'Amount';
        get expressionDisplay() {
            const display = this.expression || '';
            return display.indexOf('+') === -1 ? '' : display;
        }

        @Prop(String) type: string | undefined;
        @Prop(String) amountValue: string | undefined;
        @Prop(String) expression: string | undefined;

        get dotPosition() {
            const amountString = this.amountValue + '';
            if (amountString === '') {
                return 'emptyString'    // ''
            } else if (amountString.indexOf('.') === -1) {
                return 'noDot'          // '0' or 'x'
            } else if (amountString.indexOf('.') === amountString.length - 1) {
                return 'last'           // '0.' or 'x.'
            } else if (amountString.indexOf('.') === amountString.length - 2) {
                return 'lastButOne'     // '0.0' or 'x.x'
            } else {
                return 'lastButTwo'     // '0.00' or 'x.xx'
            }
        }

    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .money-number-wrapper {
        @extend %tally-text-wrapper;

        > .money-number-content {
            @extend %tally-text-content;


            &.outcome {
                border-bottom: 2px solid $color-green;
            }

            &.income {
                border-bottom: 2px solid $color-red;
            }

            > .icon {
                @extend %svg-theme-color;
            }

            > label {
                font-weight: bold;
                color: $color-gray;
            }

            > .input-wrapper {
                width: 70vw;
                display: flex;
                flex-direction: column;

                > div {
                    font-size: 1.8em;
                    text-align: center;

                    &.outcome,
                    &.income{
                        color: $color-lightgray
                    }
                    &.outcome > :first-child {
                        color: $color-green;
                    }

                    &.income > :first-child{
                        color: $color-red;
                    }
                }
                > #expression {
                    text-align: right;
                    padding-right: 10px;
                    padding-bottom: 1px;
                    color: $color-lightgray;
                    font-size: 0.8em;
                    overflow: auto;
                }
            }

        }
    }


</style>